<template>
  <div class="canvas">
    <el-container>
      <el-header>
        <el-col >
          <el-card shadow="always" class="card">
            仓库信息详细展示
          </el-card>
        </el-col>
      </el-header>
      <el-container>
        <el-aside class="el-aside">
          <span>今日出入库记录</span>
          <div class="div1" id="div1">
          </div>
          <span>上周库存情况</span>
          <div class="div2" id="div2">
          </div>
        </el-aside>
        <el-main>
          <show :Geometry="Geometry" :type="type"></show>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {DataAnalyze_getStore,DataAnalyze_getStoreGroup,DataAnalyze_getStoreBin} from "../buildData/DataAnalyze";
  import Show from "./show";
  import * as echarts from "echarts"
  import {statisticsGroup} from "../api/Group";
  import {statisticsStore} from "../api/Store";


  export default {
        name: "DetailPage",
        components:{Show},
        props:{},
        data(){
          return{
            no:'',//当前双击的几何体的编号
            type:'',//当前几何体的类型
            Geometry:'',//要详细显示的几何体对象
            LocationTotal:0,//库位总数
            RemainingTotal:0,//剩余库位数
            WaitTotal:0,//带出库的数量
            ExistedTotal:0,//库存数（减去了今日要出库的数量）
          }
        },
        computed:{},
        watch:{},
        created() {
          this.no=this.$route.params.no;
          //根据no的首字母判断是什么模型
          this.type=this.no.substring(0,1);
          switch (this.type) {
            case "S":{
              //获取库区几何体对象信息
              let store = DataAnalyze_getStore(this.no);
              this.Geometry=store;
              break;
            }
            case "G":{
              let group = DataAnalyze_getStoreGroup(this.no);
              this.Geometry=group;
              break;
            }
            default:{
              let bin = DataAnalyze_getStoreBin(this.no);
              this.Geometry=bin;
              break;
            }
          }
        },
        mounted() {
          this.initdiv1();
          this.initdiv2();
        },
         methods:{
           async initdiv1() {
            var dom = document.getElementById("div1");
             switch (this.type) {
               case "S":{
                 await statisticsStore(this.no).then(res=>{
                   this.LocationTotal=res.data.LocationTotal;
                   this.RemainingTotal=res.data.RemainingTotal;
                   this.WaitTotal=res.data.waitTotal;
                   this.ExistedTotal=this.LocationTotal-this.RemainingTotal-this.WaitTotal;
                 })
                 break;
               }
               case "G":{
                 //获取当前组的出入库相关信息
                 await statisticsGroup(this.no).then(res=>{
                   this.LocationTotal=res.data.LocationTotal;
                   this.RemainingTotal=res.data.RemainingTotal;
                   this.WaitTotal=res.data.waitTotal;
                   this.ExistedTotal=this.LocationTotal-this.RemainingTotal-this.WaitTotal;
                 })
                 break;
               }
               default:{
                 break;
               }
             }

            var myChart = echarts.init(dom);
            var app = {};
            var option;
            option = {
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '5%',
                left: 'center'
              },
              series: [
                {
                  name: '详细数据',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '40',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {value: this.ExistedTotal, name: '库存'},
                    {value: this.WaitTotal, name: '今日待出库'},
                    {value: this.RemainingTotal, name: '空余库位'},
                  ]
                }
              ]
            };

            if (option && typeof option === 'object') {
              myChart.setOption(option);
            }
          },
          initdiv2(){
            var dom = document.getElementById("div2");
            var myChart = echarts.init(dom);
            var app = {};
            var option;
            option = {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: [120, {
                  value: 200,
                  itemStyle: {
                    color: '#a90000'
                  }
                }, 150, 80, 70, 110, 130],
                type: 'bar'
              }]
            };
            if (option && typeof option === 'object') {
              myChart.setOption(option);
            }
          }

        }
    }
</script>

<style scoped>
.card{
  background-color: #428ddc;
  font-size: 25px;
  color: white;
}
.el-aside{
  background-color: #428ddc;
  font-size: 25px;
  color: white;
  margin-top: 20px;
  margin-left: 20px;
  padding-top: 10px;
}
.div1{
  height: 40%;
}
.div2{
  height: 410px;
}
</style>
